<template>
  <div class="balance">
    <div class="balance-header">
      <div class="balance-header-title"></div>
      <div class="balance-header-form">
        <el-select
          v-model="headerForm.projectId"
          placeholder="请选择"
          @change="headerSearch"
        >
          <el-option
            label="全部项目"
            value=""
          ></el-option>
          <el-option
            v-for="item in projectOption"
            :key="item.id"
            :label="item.projectName"
            :value="item.id"
          />
        </el-select>
        <el-select
          v-model="headerForm.status"
          placeholder="请选择"
          @change="headerSearch"
        >
          <el-option
            v-for="item in stateOption"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <CardList
      :data="dataList.list"
      @clickitem="gotoRoom"
    >
      <template #content="{ item }">
        <li>
          <span>{{ item.dayFee || "-" }}</span>
          <span>今日费用（元）</span>
        </li>
        <li>
          <span>{{ item.balance || "-" }}</span>
          <span>剩余金额(元)</span>
        </li>
      </template>
      <template #status="{ item }">
        <div
          v-if="stateConfig[item.status]"
          :class="stateConfig[item.status].color"
          class="card-status"
        >
          {{ stateConfig[item.status].label }}
        </div>
      </template>
    </CardList>
  </div>
</template>

<script setup lang="ts">
/**
 * 用户明细
 */
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { getProjectList, getBalanceList } from "@/api/settle";
import CardList from "@/components/CardList/Index.vue";

const router = useRouter();
const projectOption = ref([]);
const headerForm = ref({
  projectId: null,
  status: "",
});
const pageProps = ref({
  pageNum: 1,
  pageSize: 50,
});

const stateConfig = ref({
  "1": { label: "正常", color: "green" },
  "2": { label: "低余额", color: "purple" },
  "3": { label: "欠费", color: "red" },
});

const stateOption = ref([
  {
    name: "全部状态",
    value: "",
  },
  {
    name: "正常",
    value: "1",
  },
  {
    name: "低余额",
    value: "2",
  },
  {
    name: "欠费",
    value: "3",
  },
]);
const dataList = reactive({
  list: [] as any,
});

const headerSearch = () => {
  getBalanceList(pageProps.value, headerForm.value)
    .then((res) => {
      dataList.list = res.data.records;
    })
    .catch((err) => {
      console.error("err", err.msg);
    });
};

const gotoRoom = (item: any) => {
  // console.log('item', item)
  router.push({ path: "/detailed", query: { name: item.userName } });
};

getProjectList()
  .then((res: any) => {
    projectOption.value = res.data;
  })
  .catch((err: any) => {
    console.error("err", err.msg);
  });

headerSearch();
</script>

<style lang="scss" scoped>
.balance {
  padding: 11px 16px;
  background: #f2fbf9;
  overflow: auto;
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-top: -40px;
}

.balance-header {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .balance-header-title {
    font-weight: bold;
    color: #333333;
    font-size: 16px;
    display: flex;
    align-items: center;

    .el-icon {
      margin-right: 4px;
    }
  }

  .balance-header-form {
    :deep(.el-select) {
      width: 107px;
      margin-left: 5px;
      margin-bottom: 20px;
    }

    :deep(.el-select):first-child {
      margin-left: 0px;
    }
  }
}

.card-status {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 88px;
  height: 40px;
  padding-left: 10px;
  background: #03cca1;
  border-radius: 0px 8px 0px 40px;
  font-size: 16px;
  color: #fff;

  &.red {
    background: #f56c6c;
  }

  &.purple {
    background: #f7b955;
  }
}
</style>
